<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>地区选择</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			#immersed{height: 0;width: 100%;background-color: #0B7EFD;position: fixed;top: 0;left: 0;z-index: 999;}
			.mui-row.mui-fullscreen>[class*="mui-col-"] {height: 100%;}
			.mui-col-xs-5,
			.mui-control-content {overflow-y: auto;height: 100%;}
			.mui-bar-nav~.mui-content{background:#fff;padding:0;margin-top:.91rem;}
			/*左侧*/
			.mui-segmented-control-vertical .mui-control-item{width:100%;border-bottom:1px solid #f4f4f4 !important;
			height:.9rem;line-height:.9rem;color:#000;font-size:.28rem;}
			.mui-table-view-cell:after,.mui-table-view:after{left:0;background-color:#d9d9d9;height:0;}
			.mui-table-view-cell{padding:0;height:.9rem;line-height:.9rem;color:#333;font-size:.26rem !important;box-sizing:border-box;padding-left:.4rem;position:relative;border-bottom:1px solid #f4f4f4;}
	        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{background:#f5f5f5;}
	        .mui-control-item{position:relative;}
	        .mui-control-item:after{font-family: Muiicons;position: absolute;display: inline-block;text-decoration: none;content: '\e583';color:#e5e5e5;font-size: .4rem;top:0;right: .1rem;}
	        .choose_active>i{top:.1rem;right:.3rem;font-size:.7rem;position:absolute;color:#007aff;}
	        .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item, .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active,
	        .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item, .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active{border:none}
		</style>
	</head>
	<body>
		<div id="immersed"></div>
		<div class="mui-bar mui-bar-nav" id="mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">站点列表</h1>
		</div>
		<div class="mui-content mui-row mui-fullscreen" id="mui-content">
			<div class="mui-col-xs-5" style="box-shadow:0px 0px 15px #ddd;z-index:10;">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
				</div>
			</div>
			<div id="segmentedControlContents" class="mui-col-xs-7" >
				<div id="content1" class="mui-control-content">
					<ul class="mui-table-view" id="topSite">
					</ul>
				</div>
				<div id="content2" class="mui-control-content">
					<ul class="mui-table-view" id="nextSite">
					</ul>
				</div>
				
			</div>
		</div>
	<script>
		function my_immersed(immersed){
			document.getElementById("immersed").style.height = immersed + 'px';
			document.getElementById("mui-bar-nav").style.marginTop = immersed + 'px';
			document.getElementById("mui-content").style.top = immersed + 'px';
		}
	</script>
	<script src="../../js/immersed.js"></script>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/common.js"></script>
	<script type="text/javascript" src="../../js/app.js" ></script>
		<script>
			mui.init();
			var controls = document.getElementById("segmentedControls");
			var contents = document.getElementById("segmentedControlContents");
			mui.plusReady(function(){
				mui.back = function(){
					plus.webview.currentWebview().hide('zoom-fade-in',mui.os.android ? 200 : 300)
				}
				var data = localStorage.getItem(SYS_PARAM.KEY_SITES_LIST);
				if(data)cereat(data);
				else{
					setTimeout(function(){
						data = localStorage.getItem(SYS_PARAM.KEY_SITES_LIST);
				if(data)cereat(data);
					},300)
				}
			});
			
			function cereat(data){
				var data = JSON.parse(data);
				if (data.state == '1') {
					var sites = eval(data.sites);;
					var topSiteId = data.topSiteId;//顶级站点id
					var topSiteName = data.topSiteName;//顶级站点名称
					var attributes = {"class":"mui-control-item","href":"#content1","id":topSiteId};
					var topEle = createEle('a', attributes, topSiteName);
					var segmentedControls = document.getElementById("segmentedControls");
					segmentedControls.innerHTML = "";//清空站点信息
					segmentedControls.appendChild(topEle);
					var attrs = {"id":topSiteId};
					var inner = "";
					var curSite = localStorage.getItem('KEY_CUR_SITE');
					curSite = curSite?JSON.parse(curSite):"";
					var curSiteId = curSite?curSite.id:null;
					if (curSiteId && curSiteId == topSiteId) {
						attrs.class = "mui-table-view-cell choose_active";
						inner = '<i class="mui-icon mui-icon-checkmarkempty"></i>';
					} else {
						attrs.class = "mui-table-view-cell";
					}
					var topSiteEle = createEle('li', attrs, topSiteName + inner);
					var topSite = document.getElementById("topSite");
					topSite.innerHTML = "";
					topSite.appendChild(topSiteEle);
					 //默认选中第一个 
					controls.querySelector('.mui-control-item').classList.add('mui-active');
					contents.querySelector('.mui-control-content').classList.add('mui-active');
					//遍历站点，找出顶级区划下站点（市级）
					for (var i in sites) {
						if (sites[i].pId == topSiteId) {
							var shiSiteEle = createEle("a", {"class":"mui-control-item","href":"#content2","id":sites[i].id}, sites[i].name);
							segmentedControls.appendChild(shiSiteEle);
						}
					}
					//给市级绑定事件
					mui("#segmentedControls").on("tap",".mui-control-item",function(){
						var id = this.getAttribute("id");
						var name = this.innerHTML;
						var nextSite = document.getElementById("nextSite");
						nextSite.innerHTML = "";
						//首先添加市级站点
						if (curSiteId == id) {
							var xianSiteEle = createEle("li", {"class":"mui-table-view-cell choose_active","id":id}, name+'<i class="mui-icon mui-icon-checkmarkempty"></i>');
							nextSite.appendChild(xianSiteEle);
						} else {
							var xianSiteEle = createEle("li", {"class":"mui-table-view-cell","id":id}, name);
							nextSite.appendChild(xianSiteEle);
						}
						//遍历站点，找出该市下的区、县
						for (var i in sites) {
							var site = sites[i];
							if (site.pId == id) {
								//如果是当前站点
								if (curSiteId == site.id) {
									var xianSiteEle = createEle("li", {"class":"mui-table-view-cell choose_active","id":site.id}, site.name+'<i class="mui-icon mui-icon-checkmarkempty"></i>');
									nextSite.appendChild(xianSiteEle);
								} else {
									var xianSiteEle = createEle("li", {"class":"mui-table-view-cell","id":site.id}, site.name);
									nextSite.appendChild(xianSiteEle);
								}
							}
						}
					});
					//给区、县级绑定事件
					mui(".mui-table-view").on("tap",".mui-table-view-cell",function(){
						var id = this.getAttribute("id");
						var name = this.innerText;
						var curSite = {"id":id,"name":name};
						localStorage.setItem('KEY_CUR_SITE',JSON.stringify(curSite));
						curSiteId = id;
						var iEles = document.getElementsByTagName("i");
						for (var i=0;i<iEles.length;i++) {
							var iEle = iEles[i];
							var selLiEle = iEle.parentElement;
							selLiEle.classList.remove("choose_active");
							selLiEle.removeChild(iEle);
						}
						this.classList.add("choose_active");
						this.innerHTML = name + '<i class="mui-icon mui-icon-checkmarkempty"></i>';
						var indexPage = plus.webview.getWebviewById("tab-webview-subpage-index-content.html");
						mui.fire(indexPage,"updateCurSite",{"id":id,"name":name});
						mui.back();
					});
				} else {
					mui.toast(data.msg);
				}
				closeWaitingAndShowView();
			}
			
			/**
			 * 创建元素
			 * @param {Object} tagName
			 * @param {Object} attributes
			 * @param {Object} innerHtml
			 */
			function createEle(tagName, attributes, innerHtml) {
				var ele = document.createElement(tagName);
				for (var attri in attributes) {
					ele.setAttribute(attri, attributes[attri]);
				}
				ele.innerHTML = innerHtml;
				return ele;
			}
		</script>

	</body>

</html>